<template>
  <span class="title">
    仪表读数自动识别系统
  </span>
  <div class="toolbar">
    <span class="export">
      <el-button type="success" @click="exportRecord">
        <el-icon size="18px" style="position: relative; left: -4px; top: -1px">
          <Download/>
        </el-icon>
        导出记录</el-button>
    </span>
    <span>
      <change-button></change-button>
    </span>&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    <span><i></i></span>
    <span class="user">{{ user.username }}</span>
  </div>
</template>

<script setup>
import {Download} from "@element-plus/icons-vue";
import ChangeButton from "@/Component/ChangeButton.vue";
</script>

<script>

// import axios from "axios";
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
export default {
  //后端拿取数据
  data() {
    return {
      // user1: "管理员"
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods:{
    exportRecord(){
      // axios.get("api/")
      console.log(this.user)
      this.$api.recordApi.exportByUsername(this.user.username)
        // .then(res => {
        //   res = res.data

        //   if (res.code == 200) {
        //     console.log("导出成功")

        //   } else {
        //     // 不成功，什么也不做
        //   }
        // })
        // .catch(err => {
        //   console.log("请求失败")
        // })

    }
  }
}
</script>

<style scoped>
.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.export {
  position: relative;
  right: 20px;
}

.title {
  position: absolute;
  display: flex;
  left: 240px;
  height: 60px;
  top: 16px;
  font-size: 28px;
  font-family: "HarmonyOS Sans SC";
}

.user{
  cursor: default;
}
</style>
